<template>
  <div class="app-container">
    <!-- 搜索相关区域 -->
    <div class="filter-container">
      <el-form :inline="true" :model="pageQuery" class="demo-form-inline">
        <el-form-item label="入驻类型">
          <el-select v-model="pageQuery.attrType" size="mini" placeholder="请选择入驻类型">
            <!-- <el-option label="销售属性" value="0" />
            <el-option label="基本属性" value="1" /> -->
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="reset()">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" icon="el-icon-search" @click="getPage()">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- <el-button size="small" class="filter-item" @click="addOrUpdateHandle()">导出</el-button> -->
    </div>

    <!-- 列表相关区域 -->
    <el-table
      v-loading="pageLoading"
      :data="pageVO.list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <!-- 序号 -->
      <el-table-column label="序号" align="center">
        <template slot-scope="scope">
          <span v-text="getIndex(scope.$index)"></span>
        </template>
      </el-table-column>
      <!-- 入驻类型 -->
      <el-table-column label="入驻类型" prop="updateTime" align="center">
        <template slot-scope="{row}">
          <span>{{ row.settleType }}</span>
        </template>
      </el-table-column>
      <!-- 联系人 -->
      <el-table-column label="联系人" prop="name" align="center">
        <template slot-scope="{row}">
          <span>{{ row.contact }}</span>
        </template>
      </el-table-column>
      <!-- 联系方式 -->
      <el-table-column label="联系方式" prop="name" align="center">
        <template slot-scope="{row}">
          <span>{{ row.phone }}</span>
        </template>
      </el-table-column>
      <!-- 提交时间 -->
      <el-table-column label="提交时间" prop="createTime" align="center">
        <template slot-scope="{row}">
          <span>{{ row.createTime }}</span>
        </template>
      </el-table-column>
      <!-- 提交来源 -->
      <!-- <el-table-column label="提交来源" prop="createTime" align="center">
        <template slot-scope="{row}">
          <span>{{ row.createTime }}</span>
        </template>
      </el-table-column> -->
      <el-table-column :label="$t('table.actions')" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button size="mini" type="text" @click="toReleaseProdPage(row.settleId)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页条 -->
    <pagination v-show="pageVO.total>0" :total="pageVO.total" :page.sync="pageQuery.pageNum" :limit.sync="pageQuery.pageSize" @pagination="getPage()" />
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getPage()" />
    <prod-details v-if="prodDetailsVisible" ref="prodDetails" />
  </div>
</template>

<script>
import permission from '@/directive/permission/index.js'
import Pagination from '@/components/Pagination'
import prodDetails from './prod-details.vue'
import * as api from '@/api/system/settle.js'

export default {
  name: '',
  components: { Pagination,prodDetails},
  directives: { permission },
  data() {
    return {
      prodDetailsVisible: false, // 详情
      // 查询的参数
      pageQuery: {
        pageSize: 10,
        pageNum: 1,
        name: null,
        attrType: null
      },
      // 返回参数
      pageVO: {
        list: [], // 返回的列表
        total: 0, // 一共多少条数据
        pages: 0 // 一共多少页
      },
      // loading
      pageLoading: true,
      // 查询参数
      searchParam: {
      },
      addOrUpdateVisible: false,
      options: [
        { value: '销售属性', label: 0 },
        { value: '基本属性', label: 1 }
      ]
    }
  },
  mounted() {
    this.getPage()
  },
  methods: {
    // 详情弹出
    toReleaseProdPage(settleId) {
      this.prodDetailsVisible = true
      this.$nextTick(() => {
        this.$refs.prodDetails.init(settleId)
      })
    },
    getPage() {
      console.log('进入加载页面数据')
      this.pageLoading = true
      api.page({ ...this.pageQuery, ...this.searchParam }).then(pageVO => {
        this.pageVO = pageVO
        this.pageLoading = false
      })
      console.log('进入加载页面数据')
      console.log(this.pageVO)
      console.log('进入加载页面数据')
    },
    // 重置
    reset(){

    },
    godetail(){
      console.log('=======>')
      this.$router.push({path: '/us/joindetail'})
    },
    addOrUpdateHandle(attrId) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(attrId)
      })
    },
    // deleteHandle(attrId) {
    //   this.$confirm(this.$t('table.sureToDelete'), this.$t('table.tips'), {
    //     confirmButtonText: this.$t('table.confirm'),
    //     cancelButtonText: this.$t('table.cancel'),
    //     type: 'warning'
    //   }).then(() => this.deleteById(attrId))
    // },
    // deleteById(attrId) {
    //   api.deleteById(attrId).then(() => {
    //     this.$message({
    //       message: this.$t('table.actionSuccess'),
    //       type: 'success',
    //       duration: 1500,
    //       onClose: () => this.getPage()
    //     })
    //   })
    // },

   //获取表格序号
   getIndex(index) {
     return (this.pageQuery.pageNum - 1) * this.pageQuery.pageSize + index + 1
   },

    // 刷新回调用
    refreshChange() {
      console.log('刷新回调')
      this.page = this.$refs.crud.$refs.tablePage.defaultPage
      this.getPage(this.page)
    }
  }
}
</script>
